<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<title>测试页面</title>
<style>
body {
	margin: 0;
	text-align: center;
}

.video_play {
	height: 100%;
	width: 100%;
}
</style>
<link rel="stylesheet"
	href="${basePath}/resources/adminlte/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet"
	href="${basePath}/resources/adminlte/dist/css/AdminLTE.min.css" />
<link rel="stylesheet"
	href="${basePath}/resources/common/libs/font-awesome/css/font-awesome.min.css">
</head>
<script src="https://open.ys7.com/sdk/js/1.3/ezuikit.js"></script>
<body>
	<input id=cameraId type="hidden" value="${video.id}" />
	<div>
		<video class="video_play" id="myPlayer" poster="" controls playsInline webkit-playsinline autoplay>
			<source src="${video.rtmp}" type="" />
			<source src="${video.hls}" type="application/x-mpegURL" />
		</video>
	</div>

	<div class="box">
		<div class="box-header">
			<h3 class="box-title">摄像头控制</h3>
		</div>
		<div class="box-body">

			<a class="btn btn-app" onmousedown="start(0);" onmouseup="stop(0);"> <i class="fa fa-arrow-up"></i> 向上</a> 
			<a class="btn btn-app" onmousedown="start(1);" onmouseup="stop(1);"> <i class="fa fa-arrow-down"></i> 向下</a> 
			<a class="btn btn-app" onmousedown="start(2);" onmouseup="stop(2);"> <i class="fa fa-arrow-left"></i> 左转</a> 
			<a class="btn btn-app" onmousedown="start(3);" onmouseup="stop(3);"> <i class="fa fa-arrow-right"></i> 右转</a> 
			<a class="btn btn-app" onmousedown="start(4);" onmouseup="stop(4);"> <i class="fa fa-arrow-up"></i> 左上</a> 
			<a class="btn btn-app" onmousedown="start(5);" onmouseup="stop(5);"> <i class="fa fa-arrow-down"></i> 左下</a> 
			<a class="btn btn-app" onmousedown="start(6);" onmouseup="stop(6);"> <i class="fa fa-arrow-left"></i> 右上</a> 
			<a class="btn btn-app" onmousedown="start(7);" onmouseup="stop(7);"> <i class="fa fa-arrow-right"></i> 右下</a> 
			<a class="btn btn-app" onmousedown="start(8);" onmouseup="stop(8);"> <i class="fa fa-expand"></i> 放大</a> 
			<a class="btn btn-app" onmousedown="start(9);" onmouseup="stop(9);"> <i class="fa fa-compress"></i> 缩小</a> 
			<a class="btn btn-app" onmousedown="start(10);" onmouseup="stop(10);"> <i class="fa fa-arrows-alt"></i> 近焦</a> 
			<a class="btn btn-app" onmousedown="start(11);" onmouseup="stop(11);"> <i class="fa fa-arrows"></i> 远焦</a>
		</div>
		<!-- /.box-body -->
	</div>

	<script>
		var player = new EZUIPlayer('myPlayer');
		player.on('error', function() {
			console.log('error');
		});
		player.on('play', function() {
			console.log('play');
		});
		player.on('pause', function() {
			console.log('pause');
		});

		function start(direction) {
			var cameraId = document.getElementById("cameraId").value;
			var url = getRootPath()+"/camera/start/"+cameraId+"/"+direction;
			baseAjax('GET',url,{},function(data){
		        console.log(data);
		    });
		}
		function stop(direction) {
			var cameraId = document.getElementById("cameraId").value;
			var url = getRootPath()+"/camera/stop/"+cameraId+"/"+direction;
			baseAjax('GET',url,{},function(data){
		        console.log(data);
		    });
		}
		
		
		function baseAjax() {
		    var xmlhttp;
		    if (window.XMLHttpRequest) {
		        xmlhttp = new XMLHttpRequest();
		    } else if (window.ActiveXObject) {  
		        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
		    } else {  
		        xmlhttp = null;  
		        return;
		    }  
		    xmlhttp.open(arguments[0],arguments[1],true);
		    var callback = arguments[3];
		    xmlhttp.onreadystatechange = function(){
		        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
		            callback(JSON.parse(xmlhttp.responseText));
		        }
		    }
		    if (arguments[0] == 'GET') {
		        xmlhttp.send();
		    } else {
		        var str = formatParams(arguments[2]);
		        console.log(str);
		        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		        xmlhttp.send(str);
		    }
		}
		
		function getRootPath(){  
		    //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp  
		    var curWwwPath=window.document.location.href;  
		    //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp  
		    var pathName=window.document.location.pathname;  
		    var pos=curWwwPath.indexOf(pathName);  
		    //获取主机地址，如： http://localhost:8083  
		    var localhostPaht=curWwwPath.substring(0,pos);
		    return localhostPaht;  
		}  
		
	</script>
</body>
</html>